<template>
  <div class="searchbox">
            <!-- v-model 表单数据绑定, 也是唯一一个具有双向数据绑定特点的指令 -->
            <!-- v-model 指令主要配合表单元素使用 -->
            <input type="text" placeholder="输入关键字" v-model="searchText">
            <!-- <span @click="search">搜索</span> -->
            <span @click="searcha" >搜索</span>
        </div>
</template>

<script>
export default {
  data(){
    return {
      searchText: '',//保存输入框输入的内容(临时)
    }
  },
  methods:{
    searcha(){
      this.$emit('sou',this.searchText);
       // 清空输入框
      this.searchText = '';
    }
  }
}
</script>

<style lang="scss" scoped>
.searchbox {
            display: flex;
            align-items: center;
            color: lightskyblue;
            margin-top: 5px;
        }

.searchbox input {
            height: 40px;
            border: 0px;
            outline: none;
            background-color: #f5f5f5;
            padding-left: 20px;
            color: #999;
            font-size: 14px;
            flex: 1;
            border-radius: 20px;
        }

.searchbox span {
            width: 40px;
            text-align: center;
        }

</style>